<template>
  <!-- 无用组件 -->
  <div id="viewBottom">
    <div id="swip">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div v-for='(item,index) in PlatformPicsList' class="swiper-slide" @click="showclick(item.RecognizeId)">
            <img :src="item.ImgUrl">
          </div>
        </div>
              <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../../node_modules/swiper/css/swiper.css'
  import '../../../static/js/swiper.min.js'
  import {PlatformPics} from "../../request/api"
  export default {
    data() {
      return {
        swiperList: 17,
        swiperEvent: '',
        PlatformPicsList:[]
      }
    },
    mounted() {


    },
    methods: {
      showclick(e) {
        console.log(e)
      },
      initSwiper(){
        new Swiper('#swip .swiper-container', {
          // 如果需要分页器
          watchSlidesProgress: true,
          slidesPerView: 'auto',
          slideToClickedSlide:true,
          centeredSlides: true,
          loop: true,
          initialSlide :3,
          autoplay: 4000,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          onProgress: function(swiper, progress) {
            for (var i = 0; i < swiper.slides.length; i++) {
              var slide = swiper.slides.eq(i);
              var slideProgress = swiper.slides[i].progress;
              var modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.5 + 1;
              }
              var translate = slideProgress * modify * 40 + 'px';
              var scale = 1 - Math.abs(slideProgress) / 9;
              var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform('translateX(' + translate + ') scale(' + scale + ')');
              slide.css('zIndex', zIndex);
              slide.css('opacity', 1);
              if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0);
              }
            }
          },
          onSetTransition: function(swiper, transition) {
            for (var i = 0; i < swiper.slides.length; i++) {
              var slide = swiper.slides.eq(i)
              slide.transition(transition);
            }

          },

        })
      }
    }
  }
</script>

<style scoped>
  #viewBottom {
    height: 200px;
    width: 95%;
    margin-left: 2.5%;
    position: absolute;
    bottom: 10px;
    left: 0;
  }

  .swiper-container {
    width: 100%;
    height: 100%;
    color: #FFFFFF;
  }

  #viewBottom .swiper-button-prev {
    left: 0 !important;
  }

  #viewBottom .swiper-slide img {
    width: 100% !important;
    height: 100%;
    border: 2px solid #3DA4FB;
  }

  #viewBottom .swiper-slide {
    width: 300px;
    height: 190px;
  }
#swip{
  height: 100%;
}
</style>
